<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

    <title>  首页 Index  </title>
    <link rel="stylesheet" th:href="@{/css/base.css}">


    <style>
        a {
            margin: 12px;
        }

        a:hover {
            background: #000;
            color: white;
        }
    </style>
</head>
<body style="   ">


<!--<img th:src="@{/img/TEST.jpg}" style="width:123px; height:123px;  "/>-->
<!--<h1>首页 index ( 记得新建数据库 ) </h1>-->







<!-- ========================================= 分页 组件 =========================================  -->
<style>
    /* 分页容器 */
    .pagination-container {
        text-align: center;
        margin-top: 20px;
    }

    /* 按钮基础样式 */
    .pagination-button,
    .pagination-number {
        display: inline-block;
        padding: 8px 12px;
        margin: 8px 4px;
        text-decoration: none;
        color: var(--color-220);
        border: 1px solid #a09a9a;
        border-radius: 4px;
        background-color: var(--color-30);
        transition: all 0.2s ease-in-out;
    }

    /* 按钮悬停效果 */
    .pagination-button:hover,
    .pagination-number:hover {
        background-color: #4e4c4c;
        color: #fff;
    }

    /* 当前页码高亮 */
    .pagination-number.active {
        background-color: #4e4c4c;
        color: #fff;
        font-weight: bold;
        cursor: default;
    }

    /* 省略号样式 */
    .pagination-dots {
        display: inline-block;
        padding: 8px 12px;
        color: #777;
        font-size: 16px;
    }
</style>

<h2>当前页: </h2>
<h1 th:text="${currentPage}"></h1>

<div class="pagination-container">
    <th:block th:with="previousPage=${currentPage - 1}">
        <a th:if="${previousPage >= 0}"
           th:href="@{'/article_list' + '?page=' + ${previousPage}}"
           class="pagination-button">
            « 上一页
        </a>
    </th:block>
    <!-- 下一页 -->
    <th:block th:with="nextPage=${currentPage + 1}">
        <a th:if="${nextPage < totalPages}"
           th:href="@{'/article_list' + '?page=' + ${nextPage}}"
           class="pagination-button">
            下一页 »
        </a>
    </th:block>

    <br><br>

    <!-- 首页 -->
    <a th:if="${currentPage >= 1}"
       th:href="@{'/article_list'}"
       class="pagination-number">
        0
    </a>

    <!-- 省略号 -->
    <span th:if="${currentPage > 3}" class="pagination-dots">...</span>

    <!--    当前页的前 1/2 页   -->
    <!--    Thymeleaf 不能在 ${} 里直接进行算术运算， 使用 th:with 预先计算 lastPage，然后在 th:href 中使用它  -->
    <th:block th:with="the_page=${currentPage - 2}">
        <a th:if="${currentPage > 2}"
           th:href="@{'/article_list' + '?page=' + ${the_page}}"
           th:text="${the_page}"
           class="pagination-number">
        </a>
    </th:block>
    <th:block th:with="the_page=${currentPage - 1}">
        <a th:if="${currentPage >= 2}"
           th:href="@{'/article_list' + '?page=' + ${the_page}}"
           th:text="${the_page}"
           class="pagination-number">
        </a>
    </th:block>

    <!-- 当前页 -->
    <span class="pagination-number active">[[${currentPage}]]</span>

    <!-- 当前页的后两页 -->
    <th:block th:with="the_page=${currentPage + 1}">
        <a th:if="${currentPage < totalPages - 2}"
           th:href="@{'/article_list' + '?page=' + ${the_page}}"
           th:text="${the_page}"
           class="pagination-number">
        </a>
    </th:block>
    <th:block th:with="the_page=${currentPage + 2}">
        <a th:if="${currentPage < totalPages -3 }"
           th:href="@{'/article_list' + '?page=' + ${the_page}}"
           th:text="${the_page}"
           class="pagination-number">
        </a>
    </th:block>

    <!-- 省略号 -->
    <span th:if="${currentPage < totalPages - 3}" class="pagination-dots">...</span>

    <!-- 末页 -->
    <!--    Thymeleaf 不能在 ${} 里直接进行算术运算， 使用 th:with 预先计算 lastPage，然后在 th:href 中使用它  -->
    <th:block th:with="lastPage=${totalPages - 1}">
        <a th:if="${currentPage < totalPages - 1}"
           th:href="@{'/article_list' + '?page=' + ${lastPage}}"
           class="pagination-number">
            [[${lastPage}]]
        </a>
    </th:block>
</div>

弥补出后端代码
技术栈 java21,  springboot3,  springboot3 JPA ,  Thymeleaf/JavaScript,  数据库 MySQL 8 (不要使用 vue or react 等等前端框架)



<div th:each="item, iterStat : ${articles}">
<!--    <p th:text="${iterStat.index} ">序号</p>-->
    <h2 th:text="' '+${item.title}"></h2>
    <p th:text="' '+${item.content}"></p>
    <p>-------------------------------------------</p>
</div>






<br><br><br><br><br><br><br><br><br>
</body>
<script th:inline="javascript">
</script>
</html>